<template>
  <a-form ref="filmFormRef" :model="filmState" :rules="configRules" class="film-config">
    <div class="film-config-top">
      <div class="film-config-top-tip">
        <info-circle-outlined class="film-config-top-tip-icon" />
        <span class="film-config-top-tip-title">说明：</span>
        <span class="film-config-top-tip-text"
          >添加影片和影人时，支持通过豆瓣库获取影片和影人资料，系统已提供默认接口，也可以使用自定义接口。</span
        >
      </div>
      <a-form-item label="接口类型" name="interface_type" class="form-item">
        <a-radio-group v-model:value="filmState.interface_type" @change="handleChange">
          <a-radio :value="0">系统默认接口</a-radio>
          <a-radio :value="1" class="ml-[53px]">自定义接口</a-radio>
        </a-radio-group>
      </a-form-item>
    </div>
    <div class="film-config-middle">
      <div class="film-config-middle-title">影片获取</div>
      <a-form-item
        label="豆瓣获取影片接口"
        name="douban_movie_addr"
        :rules="filmState.interface_type === 0 ? [] : [{ required: true, message: '请输入豆瓣影片接口' }]"
        class="form-item"
      >
        <div class="default-btn" v-if="isDefaultInterface">已内置</div>
        <a-input
          v-else
          v-model:value="filmState.douban_movie_addr"
          class="w-[460px]"
          placeholder="请输入豆瓣获取影片接口"
        />
      </a-form-item>
      <!--   <a-form-item label="百度百科取影片接口地址" name="baiduFilmAddress" class="form-item">
      <div class="default-btn" v-if="isDefaultInterface">已内置</div>
      <a-input
        v-else
        v-model:value="filmState.baiduFilmAddress"
        class="w-[460px]"
        placeholder="请输入百度百科取影片接口地址"
      />
    </a-form-item>
    <a-form-item label="维基百科取影片接口地址" name="wikiFilmAddress" class="form-item">
      <div class="default-btn" v-if="isDefaultInterface">已内置</div>
      <a-input
        v-else
        v-model:value="filmState.wikiFilmAddress"
        class="w-[460px]"
        placeholder="请输入维基百科取影片接口地址"
      />
    </a-form-item>-->
    </div>
    <div class="film-config-middle">
      <div class="film-config-middle-title">影人获取</div>
      <a-form-item
        label="豆瓣获取影人接口"
        name="douban_person_addr"
        :rules="filmState.interface_type === 0 ? [] : [{ required: true, message: '请输入豆瓣影人接口' }]"
        class="form-item"
      >
        <div class="default-btn" v-if="isDefaultInterface">已内置</div>
        <a-input
          v-else
          v-model:value="filmState.douban_person_addr"
          class="w-[460px]"
          placeholder="请输入豆瓣获取影人接口"
        />
      </a-form-item>
    </div>
    <div class="film-config-middle">
      <div class="film-config-middle-title">封面获取</div>
      <a-form-item
        label="豆瓣获取封面接口"
        name="douban_cover_addr"
        :rules="filmState.interface_type === 0 ? [] : [{ required: true, message: '请输入豆瓣封面接口' }]"
        class="form-item"
      >
        <div class="default-btn" v-if="isDefaultInterface">已内置</div>
        <a-input
          v-else
          v-model:value="filmState.douban_cover_addr"
          class="w-[460px]"
          placeholder="请输入豆瓣获取封面接口"
        />
      </a-form-item>
    </div>
  </a-form>
  <div class="page-btn">
    <a-button type="primary" :loading="loading" @click="saveImagePage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import { configRules } from '../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const {
  system: { get_movie_set, set_movie_set }
} = apis
const filmFormRef = ref()
const loading = ref(false)
interface FIlmState {
  interface_type: number
  douban_movie_addr: string
  // baiduFilmAddress: string
  // wikiFilmAddress: string
  douban_person_addr: string
  douban_cover_addr: string
}
const filmState = reactive<FIlmState>({
  interface_type: 1,
  douban_movie_addr: '',
  // baiduFilmAddress: '',
  // wikiFilmAddress: ''
  douban_person_addr: '',
  douban_cover_addr: ''
})
//单选按钮切换事件
const handleChange = () => {
  filmFormRef.value.clearValidate(['douban_movie_addr', 'douban_person_addr', 'douban_cover_addr'])
}
const getFilmSet = () => {
  get_movie_set().then((res: any) => {
    console.log(res, '获取影片设置')
    // filmState.interface_type = res.interface_type
    // filmState.douban_movie_addr = res.douban_movie_addr
    Object.assign(filmState, res)
    // filmState.volume = res.volume
  })
}
const isDefaultInterface = computed(() => {
  return filmState.interface_type === 0 ? true : false
})
const saveImagePage = () => {
  filmFormRef.value.validate().then(() => {
    loading.value = true
    console.log(filmState)
    set_movie_set(filmState)
      .then((res: any) => {
        message.success('影片信息配置保存成功')
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  })
}
defineExpose({ getFilmSet })
</script>

<style lang="less" scoped>
.film-config {
  &-top {
    border-bottom: 1px solid #f0f0f0;

    &-tip {
      width: 100%;
      min-height: 48px;
      background: #fffbe4;
      border: 0.5px solid rgba(255, 169, 0, 1);
      border-radius: 3px;
      font-size: 14px;
      padding: 14px 16px;
      box-sizing: border-box;
      margin-bottom: 24px;

      &-icon {
        color: #ffa900;
      }
      &-title {
        font-size: 14px;
        color: #262626;
        font-weight: 500;
        margin-left: 8px;
      }
      &-text {
        font-size: 14px;
        color: #595959;
        font-weight: 400;
        margin-left: 8px;
      }
    }
  }
  &-middle:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
  }
  &-middle {
    // height: 238px;
    padding: 24px 0;
    &-title {
      font-size: 16px;
      color: #262626;
      letter-spacing: 1.14px;
      font-weight: 500;
      margin-bottom: 26px;
    }
    :deep(.ant-form-item-label > label) {
      width: 181px;
    }
  }
  .form-item {
    :deep(.ant-form-item-label > label::after) {
      content: '';
      margin-right: 15px;
    }
    .default-btn {
      width: 60px;
      height: 28px;
      font-size: 14px;
      color: #00a870;
      background: rgba(0, 168, 112, 0.08);
      border-radius: 2px;
      padding: 3px 9px;
    }
  }
}
.page-btn {
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
</style>
